<template>
    <div class="box">
        <h1>作用域插槽</h1>
        <ul>
            <li v-for="(item, index) in todos" :key="item.id">
                <!--作用域插槽:可以将数据回传给父组件-->
                <slot :$row="item" :$index="index"></slot>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let todos = ref([
    { id: 1, title: "吃饭", done: true },
    { id: 2, title: "睡觉", done: false },
    { id: 3, title: "打豆豆", done: true },
    { id: 4, title: "打游戏", done: false },
]);
</script>

<style scoped>
.box {
    width: 100vw;
    height: 300px;
    background: skyblue;
}
</style>